<template>
  <div class="collection">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text" >我的收藏</span>
      <span class="header-wrap-right">
      </span>
    </div>
    <!-- tabs -->
    <div class="tabsWrap">
      <van-tabs 
        v-model="activeName"
        animated
        :swipeable='true'
        :border='false'
        title-inactive-color="#57c5c6"
        title-active-color="#FD5585"
        background='#fff'
        line-width = '40%'
        line-height = '0.02rem'
        @change=onChange(activeName)
      >
      <van-tab v-model="list.fromtable_type" 
        v-for="(list,index) in listData"
        :key="index" 
        :title="list.name"
        :name="list.fromtable_type"
        >
      <!-- 指南列表 -->
      <div style="min-height:calc(100vh - 1rem);">
        <div class="collection-list" 
        v-for='(item,index) in favorData' 
        :key="index" 
        >
        <div class="collection-listBox">
          <span class="listBox-title">{{item.thing.name}}</span>
          <span class="listBox-text" v-if="item.fromtable_type=='ResidentialNotice'">小区公告</span>
          <span class="listBox-text" v-if="item.fromtable_type=='Guide'">办事指南</span>
          <span class="listBox-time">
            <span>创建时间&nbsp;{{item.thing.createtime_text}}</span>
            <span @click="toList(item.fromtable_type,item.fromtable_id)">
              <!-- <i class="icon-color iconfont icon-youjiantou"></i> -->
              详情
            </span>
          </span>
        </div>
        </div>
      </div>
      </van-tab>
      </van-tabs>
    </div>
    <Tips v-if="length<=0"/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Tab, Tabs } from 'vant';
import Tips from '../../components/tips'
export default {
  data(){
    return{
       active: 0,
       activeName:'',
       typeName: '',
       length: '',
       listData:[
          {
            id:0,
            fromtable_type:undefined,
            name: '全部',
          },
          {
            id:1,
            fromtable_type:'ResidentialNotice',
            name: '小区公告',
          },
          {
            id:2,
            fromtable_type:'Guide',
            name: '办事指南',
          },
       ],
       favorData:[]
    }
  },
  created(){
    this.getlist()
    this.menu()
  },
  methods:{
    menu(){
      window.scrollTo(0, 0)
    },
    getlist(){
      this.$get(api.favorList, {
        params: {
          fromtable_type: this.typeName?this.typeName:undefined,
        }
      })
      .then((response) => {
        this.favorData = response.data.data.list
        this.length = response.data.data.total
      })
      .catch((error) => {
        console.log(error)
      });   
    },
    goback(){
      this.$router.go(-1)
    },
    toList(path,id){
      switch (path) {
        case 'Guide':
        this.$router.push({
          path: '/guideDetail',
          query: {
            id
          }
        })
        break;
        case 'ResidentialNotice':
        this.$router.push({
          path: '/noticeDetail',
          query: {
            id
          }
        })
        break;
      }
    },
    onChange(activeName){
      this.typeName = activeName
      this.getlist()
    }
  },
  components:{
    [Tab.name]:Tab,
    [Tabs.name]:Tabs,
    Tips
  }
}
</script>
<style>
.collection .van-tab,.van-tab--active{
  font-weight: bold;
}
.collection .van-tabs__wrap{
  width: 100%;
  position: fixed;
  top: 1rem;
  left: 0;
  z-index: 1000;
  /* border-top: 1px solid #423B6F;
  border-bottom: 1px solid #423B6F; */
}
.collection .van-tabs--line{
  padding-top: 2rem;
}
</style>
<style scoped>
.collection-list{
  background: #fff;
  margin: .25rem .3rem;
  border-radius: .2rem;
  font-weight: bold;
}
.collection-listBox{
  width: 88%;
  margin: 0 auto;
  height: 2rem;
  color: #000;
}
.collection-listBox span{
  width: 100%;
  display: block;
}
.collection-listBox .listBox-title{
  padding-top: .32rem;
  font-size: .32rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.collection-listBox .listBox-text{
  color: #FD5585;
  margin: .1rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.collection-listBox .listBox-time{
  display: flex;
  color: #57c5c6;
}
.collection-listBox .listBox-time span{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.collection-listBox .listBox-time span:nth-of-type(1){
  flex: 1;
}
.collection-listBox .listBox-time span:nth-of-type(2){
  text-align: right;
  width: auto;
  color: #FD5585;
}
.icon-color{
  color: #FD5585;
}
</style>